<template xmlns="">
  <div class="forget-password">
    <!-- 标题保持相同结构 -->
    <div class="title">
      <h2>修改密码</h2>
    </div>

    <!-- 主体部分重构 -->
    <div class="main">
      <!-- 左侧验证区 -->
      <div class="email-verification">
        <el-col :span="24" :md="12">
          <el-form :model="pwdForm" ref="pwdForm">
            <el-form-item>
              <el-input
                  v-model="pwdForm.email"
                  placeholder="注册邮箱"
                  class="form-input"
                  clearable>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                  v-model="pwdForm.captcha"
                  placeholder="验证码"
                  class="form-input"
                  style="flex:1">
                <template #append>
                  <el-button
                      @click="sendCaptcha"
                      :disabled="captchaDisabled"
                      class="captcha-btn">
                    {{ captchaBtnText }}
                  </el-button>
                </template>
              </el-input>

            </el-form-item>

            <el-button
                type="primary"
                class="verify-btn"
                @click="verifyCaptcha">
              验证邮箱
            </el-button>
          </el-form>
        </el-col>
      </div>

      <div class="divider">
      </div>

      <!-- 右侧密码设置区 -->
      <div class="password-change">
        <el-col :span="24" :md="12">
          <el-form :model="pwdForm">
            <el-form-item>
              <el-input
                  v-model="pwdForm.newPassword"
                  :type="showPwd ? 'text' : 'password'"
                  placeholder="输入新密码"
                  class="form-input">
                <template #suffix>
                  <i
                      class="el-icon-view pwd-eye"
                      @click="showPwd = !showPwd">
                  </i>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                  v-model="pwdForm.confirmPassword"
                  :type="showConfirmPwd ? 'text' : 'password'"
                  placeholder="重复输入新密码"
                  class="form-input">
                <template #suffix>
                  <i
                      class="el-icon-view pwd-eye"
                      @click="showConfirmPwd = !showConfirmPwd">
                  </i>
                </template>
              </el-input>
            </el-form-item>

            <el-button
                type="success"
                class="submit-btn"
                @click="confirmChange">
              确认修改
            </el-button>
          </el-form>
        </el-col>
      </div>
    </div>

    <!-- 底部保持相同结构 -->
    <div class="footer">
      <router-link to="/register">注册账号</router-link>
      <router-link to="/">返回登录</router-link>
    </div>
  </div>
</template>

<script>
import user from '@/api/user';

export default {
  data() {
    return {
      pwdForm: {
        email: '',
        captcha: '',
        newPassword: '',
        confirmPassword: ''
      },
      showPwd: false,
      showConfirmPwd: false,
      captchaDisabled: false,
      captchaBtnText: '获取验证码',
      captchaValue: '1234' ,// 临时固定验证码
      emailVerified: false ,// 新增状态变量
    }
  },
  methods: {
    // 发送验证码
    async sendCaptcha() {
      if (!this.validateEmail()) return

      // 模拟发送请求
      this.captchaDisabled = true
      let countDown = 60
      const timer = setInterval(() => {
        this.captchaBtnText = `${countDown--}秒后重发`
        if (countDown < 0) {
          clearInterval(timer)
          this.captchaBtnText = '获取验证码'
          this.captchaDisabled = false
        }
      }, 1000)


      user.verifyEmail(this.pwdForm.email)
        .then(response => {
          if(response.data === '用户不存在'){
            this.$message.error('用户不存在');
          }
          else{
            this.$message.success('验证码已发送')
            this.captchaValue = String(response.data);
            console.log('captchaValue value:', this.captchaValue, 'type:', typeof this.captchaValue);
          }
      })
      .catch(error => {
        this.$message.error('验证失败: ' + error.message);
      });



    },

    // 验证邮箱格式
    validateEmail() {
      const reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
      if (!reg.test(this.pwdForm.email)) {
        this.$message.error('邮箱格式不正确')
        return false
      }
      return true
    },

    // 验证验证码
    verifyCaptcha() {
      //console.log(this.pwdForm.captcha);
      //console.log(this.captchaValue);
      if (this.pwdForm.captcha !== this.captchaValue) {
        this.$message.error('验证码错误')
        return
      }
      this.$message.success('验证通过')
      this.emailVerified = true
    },

    // 确认修改
    confirmChange() {
      if (!this.emailVerified) {
        this.$message.error('尚未验证邮箱')
        return
      }
      if (!this.pwdForm.newPassword) {
        this.$message.error('请输入新密码')
        return
      }
      if (this.pwdForm.newPassword !== this.pwdForm.confirmPassword) {
        this.$message.error('两次输入密码不一致')
        return
      }

      // 构建请求数据
      const userInfo = {
        email: this.pwdForm.email,
        password: this.pwdForm.newPassword
      };

      user.forgetPassword(userInfo)
          .then(response => {
            this.$message.success('密码修改成功');
            // 清空表单数据
            this.pwdForm = {
              email: '',
              captcha: '',
              newPassword: '',
              confirmPassword: ''
            };
            // 重定向到登录页面
            this.$router.push('/');
          })
          .catch(error => {
            this.$message.error('密码修改失败: ' + error.message);
          });
    }

  }
}
</script>

<style scoped lang="stylus">
.forget-password
  width 95%
  max-width 800px
  border-radius 8px
  overflow hidden
  z-index 1
  background #f0f0f0
  padding 2rem
  margin 2rem 1rem

  .title
    text-align center
    margin-bottom 2rem
    h2
      color #333
      font-size 1.5rem
      margin 0

  .main
    position relative
    margin 2rem 2rem 2rem
    display flex
    gap 2rem

    .el-col-md-12
      width 100%
      display block

    .email-verification
      flex 1
      padding-right 2rem
      .form-input
        width 100%
        height: 40px;
      .captcha-btn
        width: 10%
        &:disabled
          background: #ddd
      .verify-btn
        width: 100%
        margin-top: 20px
        background: #8bb24f
        color: white


    .divider
      content ""
      position absolute
      left 50%
      top 10%
      bottom 10%
      width 1px
      background #0b0b0b

    .password-change
      flex 1
      padding-left 2rem
      text-align center

      .pwd-eye
        cursor: pointer
        color: #999
        &:hover
          color: #666

      .submit-btn
        width: 100%
        margin-top: 20px


  .footer
    display: flex
    justify-content: space-around
    padding: 1rem
    background: #505050
    margin: 0px -40px -40px
    height 30px
    border-radius: 0 0 8px 8px
    a
      color: white;
      text-decoration: none;
      font-size: 14px;
      &:hover
        text-decoration: underline

/* 移动端适配 */
@media (max-width: 800px)
  .forget-password
    .main
      flex-direction: column
      .email-verification
        padding-right 0
        .el-form-item
          margin-bottom 1rem
      .divider
        transform rotate(90deg)
        top 0
        bottom 0
        margin-bottom 0.5rem

      .password-change
        padding-left 0

    .footer
      flex-direction: column;
      align-items: center;
      height 100%
      gap: 1rem;

</style>